<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%  
response.setHeader("Access-Control-Allow-Origin", "*");  
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日热榜·数据工厂</title>
	<link href="${pageContext.request.contextPath }/img/webLogoIcon.png" rel="shortcut icon">
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/font-awesome.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/style.css" rel="stylesheet">
    <!-- FooTable -->
    <link href="${pageContext.request.contextPath }/css/footable.core.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/css/mypage.css" rel="stylesheet">
</head>
<body>
    <div id="wrapper">
        <nav class="navbar-default navbar-static-side" role="navigation">
            <%request.setAttribute("LEFT", "hotListToday");%>
            <%@include file="../components/left.jsp"%>
        </nav>
        <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom" style="margin-bottom: 20px;">
		<jsp:include page="../components/head.jsp" flush="true" />
        </div>
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>今日热榜</h2>
                <ol class="breadcrumb">
                	<li class="nav-main1">
                		<a href="${pageContext.request.contextPath}/admin/tosystem_overview">主页</a>
                	</li>
                	
                	<li class="active">
                		<span>资讯数据</span>
                	</li>
                	<li class="active">
                		<span>今日热榜</span>
                	</li>
               	</ol>
            </div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins" id="dataInfoLine"></div>
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div class="row m-t-sm">
                                <div class="col-lg-12">
                                <div class="panel blank-panel">
                                <div class="panel-body">
                                <div class="tab-content">
                                
                                 <div class="input-select">
	                               		<div class="input-selectbox">
                                            <button data-toggle="dropdown" id="dropdown" class="btn btn-primary dropdown-toggle" type="button"  aria-expanded="false">
                                            <i class="fa fa-bars"></i>
                                            <span id="inputSelected">全部</span></button>
                                            <ul class="dropdown-menu" id="selectlist">
                                            	<li><a onclick="setselect(this)">全部</a></li>
                                                <li><a onclick="setselect(this)">总榜</a></li>
												<!-- <li><a onclick="setselect(this)">企业</a></li>
												<li><a onclick="setselect(this)">民生</a></li> -->
												<li><a onclick="setselect(this)">教育</a></li>
												<!-- <li><a onclick="setselect(this)">房产</a></li>
												<li><a onclick="setselect(this)">金融</a></li> -->
												<!-- <li><a onclick="setselect(this)">汽车</a></li> -->
												<li><a onclick="setselect(this)">体育</a></li>
												<li><a onclick="setselect(this)">游戏</a></li>
												<!-- <li><a onclick="setselect(this)">动漫</a></li> -->
												<!-- <li><a onclick="setselect(this)">搞笑</a></li>
												<li><a onclick="setselect(this)">娱乐</a></li> -->
												<!-- <li><a onclick="setselect(this)">职场</a></li>
												<li><a onclick="setselect(this)">创业</a></li>
												<li><a onclick="setselect(this)">科技</a></li> -->
												<li><a onclick="setselect(this)">母婴</a></li>
												<li><a onclick="setselect(this)">旅行</a></li>
												<li><a onclick="setselect(this)">时尚</a></li>
												<li><a onclick="setselect(this)">美食</a></li>
												<li><a onclick="setselect(this)">健康</a></li>
												<li><a onclick="setselect(this)">生活</a></li>
												<!-- <li><a onclick="setselect(this)">文化</a></li>
												<li><a onclick="setselect(this)">时事</a></li>
												<li><a onclick="setselect(this)">政务</a></li>
												<li><a onclick="setselect(this)">武汉</a></li>
												<li><a onclick="setselect(this)">上海</a></li>
												<li><a onclick="setselect(this)">广州</a></li>
												<li><a onclick="setselect(this)">成都</a></li>
												<li><a onclick="setselect(this)">杭州</a></li> -->
                                            </ul>
	                                        <input id="keyword" type="text" class="form-control" style="width:440px;padding-right: 42px;">
	                                        <i class="fa fa-search cursearch" onclick="search()"></i>
	                                    </div>
	                                </div>
                                
                                <div class="tab-pane active" id="tab-1">
                                
                                    <div class="feed-activity-list" id="list">

                                    </div>
                                    <div class="feed-activity-list" id="logs">
                                    	<div class="box" id="box" style="float: right;"></div>
                                    </div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        </div>
		<jsp:include page="../components/footer.jsp" flush="true" />
        </div>
        </div>
    <!-- Mainly scripts -->
    <script src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.metisMenu.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.slimscroll.min.js"></script>
    <!-- Custom and plugin javascript -->
    <script src="${pageContext.request.contextPath }/js/inspinia.js"></script>
    <script src="${pageContext.request.contextPath }/js/pace.min.js"></script>
    <!-- FooTable -->
    <script src="${pageContext.request.contextPath }/js/footable.all.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/mypage.js"></script>
    <!-- Page-Level Scripts -->
   	<script src="${pageContext.request.contextPath}/js/anychart-base.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/userCustom.js"></script>
    <script>
    var classification = '全部';
        $(document).ready(function() {
        	var data=${nowArray};
            createLine("微信热榜",1,data);
            $('.footable').footable();
            list(1,classification,"");
        });
        
		function list(page,classification,keyword){
			$('#list').html('<div class="feed-element">加载数据中......</div>')
        	$.ajax({
        		url : "${pageContext.request.contextPath}/hotday/data",
        		type : "post",
        		data:{
        			page: page,
        			classification:classification,
        			keyword:keyword
        		},
        		success : function(res) {
        			$('#list').html('')
        			if (res.page_count > 500) {
        				res.page_count = 500;
					}
        			paging(res.count,res.page_count,res.page)
        			var list = res.news
        			for (var i = 0; i < list.length; i++) {
        				var content = list[i]._source.content
        				if (content.length - 300 > 0) {
        					content = content.substring(0, 300) + '......'
						}
        				var key_word = '';
        				var keywordHtml = '';
        				if(list[i]._source.key_words){
        					var key_words = JSON.parse(list[i]._source.key_words);
            				var j = 0;
            				for(var key in key_words){
            					if(j == 3){
            						break;
            					}
            					key_word += key + ',';
            					j++
           					}
            				if(key_word){
            					keywordHtml = "<div class='article-source' style='margin-left: 20px;'><i class='fa fa-globe'></i>高频词："+key_word.substring(0,key_word.length -1)+"</div>";
            				}
        				}
        				var title = list[i]._source.title
						var html = 
							"<div class='custom-article b-b'> "+
							"    <div class='article-content p-l-0'>"+
							"    	<div class='article-content-title'>"+
					        "      		<a target='_blank' href='${pageContext.request.contextPath}/hotday/details?article_public_id=" + list[i]._source.article_public_id + "&type=hotListToday'>"+title.substring(title.indexOf("」")+1,title.length)+"</a>"+
					        "        </div>"+
							"        <div class='article-content-con'>"+content+"</div>"+
					        "        <div class='article-content-tips m-t-0'>"+
						    "        	<div class='article-source'><i class='fa fa-globe'></i>公众号："+list[i]._source.author+"</div>"+
						    "        	<div class='article-source' style='margin-left: 20px;'><i class='fa fa-globe'></i>分类："+list[i]._source.classification+"</div>"+
						    "        	<div class='article-source' style='margin-left: 20px;'><i class='fa fa-globe'></i>阅读量："+list[i]._source.reading+"</div>"+
						    "        	<div class='article-source' style='margin-left: 20px;'><i class='fa fa-globe'></i>在看："+list[i]._source.look_in+"</div>"+
						    keywordHtml +
						    "            <div class='article-time'><i class='fa fa-clock-o'></i>时间："+list[i]._source.publish_time+"</div>"+
						    "    	</div>"+
							"    </div>"+
							"</div>";
							
					     $('#list').append(html)
					}
        			if (list.length == 0) {
        				$('#list').html('<div class="feed-element">暂无数据！</div>')
					}
        		},
        		error: function(res) {
        			$('#list').html('<div class="feed-element">暂无数据！</div>')
        		}
        	});
        } 
		
		function search(){
			list(1,classification,$('#keyword').val());
		}
		 
        function paging(totalData,totalPage, pagenum) {
        	
			$('#box').paging({
				initPageNo : pagenum, // 初始页码
				totalPages : totalPage, //总页数
				totalCount : '合计' + totalData + '条数据', // 条目总数
				slideSpeed : 600, // 缓动速度 单位毫秒
				jump : true, //是否支持跳转
				callback : function(page) { // 回调函数 
					}
			});
		}
        
        function setselect(that){
        	classification = $(that).text();
        	$('#inputSelected').html(classification)
        	list(1,classification,$('#keyword').val());
        }
        
		function JumpToPage(pageNum) {
			list(pageNum,classification,$('#keyword').val());			
		}
    </script>
</body>
</html>
